<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 1000px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 36px;
            background-color: skyblue;
            cursor: pointer;
        }
        
        tbody tr {
            height: 36px;
            cursor: pointer;
        }
        tbody tr:hover{
			/* background:red; */
		}
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg {
            background-color: #f60;
			color:#fff;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>电话号码</th>
                <th>职业</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>艾奇</td>
                <td>111@qq.com</td>
                <td>18291823060</td>
                <td>前端web</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>罗永浩</td>
                <td>111@qq.com</td>
                <td>18291823062</td>
                <td>经理人</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>俞敏洪</td>
                <td>111@qq.com</td>
                <td>18291823060</td>
                <td>教师</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>普京</td>
                <td>111@qq.com</td>
                <td>18291853060</td>
                <td>总统</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>泽连斯基</td>
                <td>111@qq.com</td>
                <td>18291823060</td>
                <td>总统</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
	<script type="text/javascript">
		//获取tr
		//document 文档对象表示是当前这个页面
		var trs =document.querySelector('tbody').querySelectorAll('tr');
		console.log(trs.length);
		
		for(var i=0;i<trs.length;i++){
			//trs[i] document.querySelector('tbody').querySelectorAll('tr')[0]
			//console.log(trs[i])
			//鼠标移入
			trs[i].onmouseover = function(){
				this.className = 'bg';
			}
			//鼠标移出
			trs[i].onmouseout = function(){
				this.className = '';
			}
		}
		
		
	</script>
</body>

</html>